<template>
  <!-- 单位充值 -->
  <div style="padding:70px;background:#fff;">
    <!-- <a-tabs  defaultActiveKey="1" @change="callback" :size="size">
      <a-tab-pane tab="网关支付B2B" key="1">
        <a-form @submit="handleInput" :form="orgform">
          <div id="bankDiv">
            <a-form-item required style="font-size:20px">
              <a-row style="width:100%;" :gutter="16">
                <a-radio-group @change="onChange" :index="index" v-for="(one,index) in sites" :key="one.cardNo"
                  v-model="radiovalue" size="large">
                  <a-radio-button class="radioButton" :value="one.bankName">
                    <img class="bankimg" :src="imgurl" />
                  </a-radio-button>
                </a-radio-group>
              </a-row>
            </a-form-item>
          </div>
          <div style="margin-top:40px;">
            <a-form-item style="margin-bottom: 20px;" help="充值手续费：0.5%，将从充值金额中直接扣除" label="充值金额"
              :label-col="{ span: 6 }" :wrapper-col="{ span: 17,offset:1 }">
              <div class="cash_out">
                <a-input v-decorator="[
                      'amountt',
                      { rules: [{
                    required: true,
                    message: '请输入数字' },{validator: validateCode}]
                    }
                ]" size="large" placeholder="请输入金额（元）"></a-input>
                <span class="tooltip_sty">单笔小于5万 单日小于5万</span>
              </div>
            </a-form-item>
             <a-form-item style="" label="充值说明" :label-col="{ span: 6}"
              :wrapper-col="{ span: 17,offset:1 }">
              <div class="cash_out">
                <a-input v-model="Rechargenote1" size="large" placeholder="请填写充值说明"></a-input>
              </div>
            </a-form-item>
            <a-form-item>
              <a-row>
                <a-col :span="6"></a-col>
                <a-col :sm="{ span:17,offset:1}">
                  <a-button ghost type="primary" html-type="submit">登录到网上银行充值</a-button>
                </a-col>
              </a-row>
            </a-form-item>
          </div>
        </a-form>
    </a-tab-pane>-->
    <!-- <a-tab-pane tab="汇款转账" key="2" forceRender> -->
    <a-row style="margin-bottom:20px;">请使用企业网银向以下银行账户进行转账</a-row>
    <a-form class="a_form_sty" @submit="bankhandleInput" :form="bankform">
      <a-form-item label="账户名称" :label-col="{ span: 6 }" :wrapper-col="{ span: 10,offset:1 }">
        <div class="over_hidden">
          <span class="copy_content">{{AccountName}}</span>
          <a href="javascript:false;void(0);" class="copy_a" @click="copyText(AccountName)">复制</a>
        </div>
      </a-form-item>
      <a-form-item label="账号" :label-col="{ span: 6 }" :wrapper-col="{ span: 10,offset:1 }">
        <div class="over_hidden">
          <span class="copy_content">{{AccountNo}}</span>
          <a href="javascript:false;void(0);" class="copy_a" @click="copyText(AccountNo)">复制</a>
        </div>
      </a-form-item>
      <a-form-item label="开户行" :label-col="{ span: 6 }" :wrapper-col="{ span: 10,offset:1 }">
        <div class="over_hidden">
          <span class="copy_content">{{BankOfDeposit}}</span>
          <a href="javascript:false;void(0);" class="copy_a" @click="copyText(BankOfDeposit)">复制</a>
        </div>
      </a-form-item>
      <a-form-item label="开户网点" :label-col="{ span: 6 }" :wrapper-col="{ span: 10,offset:1 }">
        <div class="over_hidden">
          <span class="copy_content">{{AccountNo1}}</span>
          <a href="javascript:false;void(0);" class="copy_a" @click="copyText(AccountNo1)">复制</a>
        </div>
      </a-form-item>
      <a-form-item label="行号" :label-col="{ span: 6 }" :wrapper-col="{ span: 10,offset:1 }">
        <div class="over_hidden">
          <span class="copy_content">{{BankNo}}</span>
          <a href="javascript:false;void(0);" class="copy_a" @click="copyText(AccountNo)">复制</a>
        </div>
      </a-form-item>

      <div>
        <a-form-item label="充值金额" :label-col="{ span: 6}" :wrapper-col="{ span: 15,offset:1 }">
          <div class="cash_out">
            <a-input
              v-decorator="[
                    'bankamountt',
                    { rules: [{
                  required: true,
                  message: '请输入充值金额！' },{validator: validateCode}]
                  }
              ]"
              size="large"
              placeholder="请输入金额（元）"
            ></a-input>
            <!-- <span class="tooltip_sty">单笔小于5万 单日小于5万</span> -->
          </div>
        </a-form-item>

        <a-form-item label="充值说明" :label-col="{ span: 6}" :wrapper-col="{ span: 15,offset:1 }">
          <div class="cash_out">
            <a-input v-model="Rechargenote2" size="large" placeholder="请填写充值说明"></a-input>
            <!-- <span class="tooltip_sty">单笔小于5万 单日小于5万</span> -->
          </div>
        </a-form-item>

        <a-form-item label="上传附件" :label-col="{ span: 6}" :wrapper-col="{ span: 15,offset:1 }">
          <div class="cash_out">
            <a-upload
              v-decorator="['upload']"
              name="upfile"
              :headers="henderstoken"
              action="/file/file/upload"
              listType="picture-card"
              :fileList="fileList"
              :data="{to}"
              @preview="handlePreview"
              @change="handleChange"
            >
              <div v-if="fileList.length < 3">
                <a-icon type="plus" />
                <div class="ant-upload-text">充值说明</div>
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </div>
        </a-form-item>
      </div>

      <a-form-item>
        <a-row>
          <a-col :span="6"></a-col>
          <a-col :sm="{ span:13,offset:1}">
            <a-button ghost type="primary" :loading="loading" html-type="submit">已完成网银转账</a-button>
          </a-col>
        </a-row>
      </a-form-item>
    </a-form>
    <!-- </a-tab-pane>
    </a-tabs>-->
    <a-modal @ok="handleOk" @cancel="handleCancel" :visible="modalVisible" :footer="null">
      <div class="modalClass">
        <a-icon
          style="font-size:80px;"
          type="exclamation-circle"
          theme="twoTone"
          twoToneColor="#29a576"
        />
        <h4>请您在新打开的页面上完成付款</h4>
        <p>付款完成前请不要关闭此窗口</p>
        <p>完成付款后请根据您的情况点击下面的按钮</p>
        <div class="footClass">
          <a-button ghost type="primary" @click="payDone">已完成付款</a-button>
          <a-button ghost type="primary" @click="payProblem">付款遇到问题</a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
import api from "@/common/api";
import { mapState } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      orgform: this.$form.createForm(this),
      bankform: this.$form.createForm(this),
      size: "large",
      sites: [
        { bankName: "农业银行" },
        { bankName: "中国银行" },
        { bankName: "建设银行" },
        { bankName: "农业银行1" },
        { bankName: "中国银行1" },
        { bankName: "建设银行1" },
        { bankName: "农业银行2" },
        { bankName: "中国银行2" },
        { bankName: "建设银行2" },
        { bankName: "建设银行3" },
        { bankName: "中国银行5" },
        { bankName: "建设银行6" },
        { bankName: "农业银行7" },
        { bankName: "中国银行8" },
        { bankName: "建设银行9" }
      ],
      henderstoken: {
        Authorization: localStorage.getItem("token"),
      },
      to:sessionStorage.getItem("memberNo") + "_" + sessionStorage.getItem("username"),
      secondBankList: [{ bankName: "中国农业银行" }, { bankName: "中国银行" }],
      showAddbank: true,
      radiovalue: "农业银行",
      isshowAll: true,
      previewVisible: false,
      previewImage: "",
      fileList: [],
      voucherImage: [],
      showAll: "展开",
      showAllBankList: false,
      modalVisible: false,
      defaultVisible: true,
      bankName: "",
      AccountName: "上海申鑫电子支付股份有限公司",
      BankOfDeposit: "支付机构备付金集中存管账户",
      AccountNo: "215500704",
      AccountNo1: "上海申鑫-备付金账户",
      BankNo: "991290001286",
      imgurl: "static/img/zgyh.jpg",
      Rechargenote1: "",
      Rechargenote2: "",
      loading: false
    };
  },
  computed: {
    ...mapState({
      imageSize: state => state.imageSize
      // videoSize: state => state.videoSize
    })
  },
  mounted() {},

  methods: {
    handleOk(e) {
      setTimeout(() => {
        this.modalVisible = false;
      }, 2000);
    },
    handleCancel(e) {
      this.modalVisible = false;
    },
    payDone() {
      var amountt1 = this.orgform.getFieldValue("amountt");
      this.modalVisible = false;
      this.$router.push({
        name: "确认充值成功",
        params: {
          recharge: amountt1 * 100,
          isbind: true,
          typename: "orgRecharge"
        }
      });
    },
    payProblem() {
      this.modalVisible = false;
      this.$router.push({
        name: "确认充值成功",
        params: {
          // recharge: amountt1*100,
          isbind: false,
          typename: "orgRecharge"
        }
      });
    },
    //复制 函数
    copyText(value) {
      let self = this;
      this.$copyText(value).then(
        function(e) {
          self.$message.success("复制成功");
        },
        function(e) {
          alert("Can not copy");
        }
      );
    },
    callback(key) {
      console.log(key);
    },
    onChange(e) {
      console.log(e.target.value);
      this.bankName = e.target.value;
    },
    showAllbank() {
      this.showAllBankList = !this.showAllBankList;
      this.showAll = !this.showAllBankList ? "展开" : "折起";
    },
    handleInput(e) {
      e.preventDefault();

      this.orgform.validateFields((err, values) => {
        console.log(values);
        if (!err) {
          this.modalVisible = true;
          this.amountt = values.amountt * 100;
          // return false;
          // this.$axios
          //   .post("/withdraw/verifyAvailableBalance", {
          //     accountNo: this.bankCardNO,
          //     cashWithdrawal: values.amountt
          //   })
          //   .then(res => {
          //     console.log(res.data);
          //     if (res.data.code == "FAIL") {
          //       this.$message.error(res.data.message);
          //       // alert("提现金额小于可提现余额");
          //     } else if (res.data.code == "OK") {
          //       // console.log(values.amountt);
          //       // console.log(res.data.data);
          //       this.$router.push({
          //         name: "提现确认1",
          //         // path: "/cashmore-next",
          //         params: {
          //           seat: res.data.data,
          //           amountSum: Number(this.amountSum) + Number(values.amountt)
          //         }
          //       });
          //     }
          //   });
          console.log(this.bankName);
        }
      });
    },
    bankhandleInput(e) {
      e.preventDefault();
      this.bankform.validateFields((err, values) => {
        console.log(values);
        // console.log(sessionStorage.getItem("userName"));
        if (!err) {
          //处理其他图片
          this.voucherImage = [];
          if (values.upload) {
            let otherImgList = values.upload.fileList || values.upload;
            console.log("otherImgList", otherImgList);
            otherImgList.forEach(item => {
              if (item.response) {
                this.voucherImage.push(item.response.data);
              } else if (item.url) {
                let list = item.url.split("/");
                console.log(list, list[list.length - 1]);
                this.voucherImage.push(list[list.length - 1]);
              } else {
                this.voucherImage.push(item);
              }
            });
          }

          console.log(this.voucherImage);
          this.loading = true;
          this.$axios
            .post("/agent/transfer/recharge/save", {
              memberNo: sessionStorage.getItem("memberNo"),
              username: sessionStorage.getItem("username"),
              shortName: sessionStorage.getItem("shortName"),
              accountName: this.AccountName,
              bankName: this.BankOfDeposit,
              accountNo: this.AccountNo,
              rechargeRemark: this.Rechargenote2,
              amount: Number(values.bankamountt) * 100,
              voucherImage: this.voucherImage.join(",")
              // voucherImage: this.voucherImage
            })
            .then(res => {
              // console.log(res);

              if (res.data.code == "OK") {
                this.loading = false;
                this.$router.push({
                  name: "确认充值成功",
                  params: {
                    bankrecharge: values.bankamountt * 100,
                    isbind: true,
                    typename: "orgRecharge"
                  }
                });
              } else {
                this.$message.error(res.data.message);
              }
            });
        }
      });
    },
    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl;
      this.previewVisible = true;
    },
    handleCancel() {
      this.previewVisible = false;
    },
    handleChange({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb`);
        return;
      }
      this.fileList = fileList;
      let obj =
        fileList.length > 0
          ? fileList[0]
          : { response: { data: null, code: null } };
      if (obj) {
        if (obj.response) {
          if (obj.response.code == "OK") {
            // this.voucherImage = []
            console.log("obj.response.data", obj.response.data);
            // this.voucherImage.push(obj.response.data);
            console.log(this.voucherImage);
          }
        }
      }
    },
    // validateCode(rule, value, callback) {
    //   // let reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g')
    //   if (value && !/^[0-9]*[1-9][0-9]*$/.test(value)) {
    //     /* eslint-disable-next-line */
    //     this.amountt = false;
    //     callback("请输入数字");
    //     return;
    //   } else {
    //     //console.log(value);
    //     callback();
    //   }
    // },
    validateCode(rule, value, callback) {
      if (
        value &&
        !/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(
          value
        )
      ) {
        // if (value) {

        callback("请输入正确的金额！");
        return;
      } else {
        callback();
      }
    }
  }
};
</script>


<style scoped lang='less'>
.bankimg {
  height: 38px;
}

.radio_card {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

ul {
  padding-left: 0;
}

.li_radio_style {
  list-style: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 2px 10px;
  /* display: flex;
    align-items: center; */
  margin-bottom: 10px;
  width: 100%;
  overflow: hidden;
}

.bank_img {
  display: flex;
  align-items: center;
  float: left;
  height: 39px;
}

.li_radio_style img {
  width: 25px;
  height: 25px;
  vertical-align: middle;
  margin: 0 1%;
  float: left;
}

.li_radio_style .bank_info {
  float: left;
  margin-left: 2%;
}

.li_radio_style i {
  color: #153056;
  margin-right: 2%;
  float: right;
  font-stretch: normal;
}

.addBank {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: -15px;
}

#addBank {
  border: 1px solid #bbb;
  border-radius: 5px;
  text-align: center;
  padding: 0px 10px;
  width: 50%;
}

.tooltip_sty {
  margin-left: 20px;
  color: #3b9fe2;
  padding: 0 15px;
  font-size: 12px;
  display: flex;
  align-items: center;
  background-color: #f5fcff;
  border: 1px solid #3b9fe2;
  border-radius: 4px;
  position: relative;
  line-height: 30px;
}

.tooltip_sty:before {
  content: "";
  position: absolute;
  left: -17px;
  top: 50%;
  margin-top: -8px;
  border: 8px solid transparent;
  border-right-color: #3b9fe2;
}

.tooltip_sty:after {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  margin-top: -8px;
  border: 8px solid transparent;
  border-right-color: white;
}

.ant-tooltip-inner {
  border: 1px solid #153056;
  color: #153056;
  background-color: transparent !important;
}

.cash_out {
  display: flex;
  align-items: center;
  /* width: 600px; */
}

.cash_out input {
  width: 35%;
}

.ant-radio-button-wrapper {
  padding: 0;
}

.ant-tabs-nav .ant-tabs-tab {
  font-size: 20px;
}

.modalClass {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 40px;
  padding-bottom: 20px;
}

.modalClass h4 {
  color: #29a576;
  font-size: 22px;
  font-weight: 400;
  margin-top: 15px;
  margin-bottom: 25px;
}

.modalClass p {
  margin-bottom: 10px;
}

.footClass {
  width: 60%;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.a_form_sty {
  width: 100%;
}

.copy_content {
  font-size: 17px;
  font-weight: 500;
  color: #000;
  float: left;
}

.copy_a {
  float: right;
  color: #0772be;
  margin-right: 15px;
}

.ant-form-explain {
  font-size: 12px;
  margin-top: 10px;
}

.radioButton {
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 45px !important;
}

.over_hidden {
  overflow: hidden;
}

/*滚动条样式*/
#bankDiv::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}

#bankDiv::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

#bankDiv::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>